<template>
  <div>
    <UploadExcel :on-success="handleSuccess" />
    <div class="btn">
      <el-button round @click="$router.back()">返回</el-button>
    </div>
  </div>
</template>

<script>
const userRelations = { // 数据处理的依据对象(便于将中文转换为英文)
  '入职日期': 'timeOfEntry',
  '手机号': 'mobile',
  '姓名': 'username',
  '转正日期': 'correctionTime',
  '工号': 'workNumber'
}
// 导入处理时间工具函数
import { formatExcelDate } from '@/utils/index'
// 新增请求
import { importEmployeeApi } from '@/api/index'
export default {
  methods: {
    async importEmployee(res) { // 新增请求函数
      try {
        await importEmployeeApi(res)
        this.$message({ // 给用户一个提示
          type: 'success',
          message: '导入表格成功!'
        })
        this.$router.back() // 跳转回员工页面
      } catch (err) {
        console.dir(err)
        this.$message({ // 给用户一个提示
          type: 'success',
          message: '导入表格失败!'
        })
      }
    },
    handleSuccess({ results, header }) {
      // results 代表传递进来的表格的每一行的数据
      // header 代表传递进来的表格的表头数据
    //   console.log(results, header)
      // 子组件处理完的信息传递回来后,想要想后台传递信息之前,还需要对信息进行处理,处理为后台需要的信息
      const res = this.excelHandle(results)
      this.importEmployee(res) // 发起新增请求
    },
    excelHandle(results) { // 表格数据处理函数
      return results.map(item => {
        const obj = {} // 每项处理完返回的对象
        const chkeyArr = Object.keys(item) // 获取中所有的中文属性名
        chkeyArr.forEach(chkey => {
          // 由于xlsx组件处理完的日期不是后台需要的,这里还需要我们自己封装函数处理
          if (['correctionTime', 'timeOfEntry'].includes(userRelations[chkey])) { // 判断需要修改的日期
            // 通过中文key名找到对应的英文key名 赋值
            obj[userRelations[chkey]] = new Date(formatExcelDate(item[chkey])) // 处理日期
          } else {
            obj[userRelations[chkey]] = item[chkey]
          }
        })
        return obj
      })
    }
  }
}
</script>

<style scoped>
.btn{
    margin-top: 20px;
    text-align: center;
}
</style>
